<template>
  <div class="sales-3d-chart">
    <div class="chart-header">
      <h3 class="chart-title">{{ title }}</h3>
      <div class="chart-controls">
        <button 
          class="control-btn"
          :class="{ active: viewMode === 'bar' }"
          @click="viewMode = 'bar'"
        >
          柱状图
        </button>
        <button 
          class="control-btn"
          :class="{ active: viewMode === 'surface' }"
          @click="viewMode = 'surface'"
        >
          曲面图
        </button>
      </div>
    </div>
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import { sales3DData } from '../mock/dashboardData.js'

const props = defineProps({
  title: {
    type: String,
    default: '销售数据3D分析'
  },
  data: {
    type: Object,
    default: () => sales3DData
  }
})

const chartRef = ref(null)
const viewMode = ref('bar')
let chart = null

onMounted(() => {
  initChart()
  startDataUpdate()
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})

watch(viewMode, () => {
  updateChart()
})

const initChart = () => {
  chart = echarts.init(chartRef.value)
  updateChart()
  
  // 响应式处理
  window.addEventListener('resize', () => {
    chart?.resize()
  })
}

const updateChart = () => {
  if (!chart) return
  
  const { hours, days, data } = props.data
  
  const option = viewMode.value === 'bar' ? {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(15, 52, 96, 0.9)',
      borderColor: '#00f0ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff'
      },
      formatter: function(params) {
        return `${days[params.data[0]]} ${hours[params.data[1]]}<br/>销售额: ¥${params.data[2]}`
      }
    },
    visualMap: {
      max: 1000,
      inRange: {
        color: [
          '#313695', '#4575b4', '#74add1', '#abd9e9',
          '#e0f3f8', '#ffffcc', '#fee090', '#fdae61',
          '#f46d43', '#d73027', '#a50026'
        ]
      },
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis3D: {
      type: 'category',
      data: days,
      axisLabel: {
        color: '#00f0ff'
      },
      axisLine: {
        lineStyle: {
          color: '#00f0ff'
        }
      }
    },
    yAxis3D: {
      type: 'category',
      data: hours,
      axisLabel: {
        color: '#00f0ff'
      },
      axisLine: {
        lineStyle: {
          color: '#00f0ff'
        }
      }
    },
    zAxis3D: {
      type: 'value',
      axisLabel: {
        color: '#00f0ff',
        formatter: '¥{value}'
      },
      axisLine: {
        lineStyle: {
          color: '#00f0ff'
        }
      }
    },
    grid3D: {
      boxWidth: 200,
      boxDepth: 80,
      boxHeight: 60,
      alpha: 30,
      beta: 40,
      light: {
        main: {
          intensity: 1.2,
          shadow: true
        },
        ambient: {
          intensity: 0.3
        }
      },
      environment: 'none',
      postEffect: {
        enable: true,
        bloom: {
          enable: true,
          bloomIntensity: 0.1
        }
      }
    },
    series: [{
      type: 'bar3D',
      data: data,
      shading: 'lambert',
      itemStyle: {
        opacity: 0.8
      },
      emphasis: {
        itemStyle: {
          color: '#00f0ff'
        },
        label: {
          show: true,
          formatter: '¥{c}',
          color: '#00f0ff'
        }
      }
    }]
  } : {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(15, 52, 96, 0.9)',
      borderColor: '#00f0ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff'
      }
    },
    visualMap: {
      max: 1000,
      inRange: {
        color: [
          '#313695', '#4575b4', '#74add1', '#abd9e9',
          '#e0f3f8', '#ffffcc', '#fee090', '#fdae61',
          '#f46d43', '#d73027', '#a50026'
        ]
      },
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis3D: {
      type: 'category',
      data: days,
      axisLabel: {
        color: '#00f0ff'
      }
    },
    yAxis3D: {
      type: 'category',
      data: hours,
      axisLabel: {
        color: '#00f0ff'
      }
    },
    zAxis3D: {
      type: 'value',
      axisLabel: {
        color: '#00f0ff'
      }
    },
    grid3D: {
      boxWidth: 200,
      boxDepth: 80,
      alpha: 30,
      beta: 40,
      light: {
        main: {
          intensity: 1.2
        },
        ambient: {
          intensity: 0.3
        }
      }
    },
    series: [{
      type: 'surface',
      wireframe: {
        show: false
      },
      data: data,
      itemStyle: {
        opacity: 0.8
      }
    }]
  }
  
  chart.setOption(option, true)
}

const startDataUpdate = () => {
  setInterval(() => {
    updateChart()
  }, 5000) // 每5秒更新一次数据
}
</script>

<style scoped>
.sales-3d-chart {
  background: rgba(15, 52, 96, 0.3);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(10px);
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  color: #00f0ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.chart-controls {
  display: flex;
  gap: 8px;
}

.control-btn {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.control-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

.control-btn.active {
  background: rgba(0, 240, 255, 0.3);
  border-color: #00f0ff;
}

.chart-container {
  height: 400px;
  width: 100%;
}
</style> 